<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件向父组件通信</title>
    <script src="js/vue-2.6.10.js"></script>

</head>
<body>
<div id="app">
    <h2>num={{num}}</h2>
    <!--组件-->
    <counter @plus="numPlus" @reduce="numReduce"  :snum="num"></counter>
    <my-list></my-list>
</div>
<script type="text/javascript">
    //定义组件
    const counter={
        //模板
        template:`
           <div>
                 <button @click="incrNum">+</button>
                 <button @click="decrNum">-</button>
            </div>
        `,
        //定义接收子组件的属性
        props:['snum'],
        methods: {
            incrNum(){
                //
                this.$emit("aa");
            },
            decrNum(){
                this.$emit("reduce");
            }
        }

    }

    //全局注册组件：在所有的vue实例中都可以使用组件
    //参数1：组件名称，参数2：具体的组件
    //Vue.component("aaa",counter);
    var app=new Vue({
        el:"#app",
        //1.定义父组件数据
        data:{
            msg:"这是子组件",
            //数据
             num:0
           // person:{"id":1,"name":"boot"}
        },
        //局部注册
        components:{
            counter
        },
        methods:{
            numPlus(){
                this.num++;
            },
            numReduce(){
                this.num--;
            }
        }

    })
</script>
</body>
</html>